<template>
  <div class="course-table">
    <el-table
      :data="courseData"
      border
    >
      <el-table-column v-for="item in columns" :key="item.prop"
                       :prop="item.prop"
                       :label="item.label" :align="item.align ? item.align : 'center'"
                       :width="item.prop === '_tb_courseNum'?'60': undefined"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import tableConfig from './config.js'

  export default {
    props: {
      courseData: {
        type: Array,
        require: true,
        default: () => ([])
      },
    },
    data() {
      return {
        columns: tableConfig.columns
      }
    },
    methods: {
      renderTable() {
        this.setAutoWrap()
        this.setCellColor();
        console.log('Render finished...')
      },
      setAutoWrap() {
        const cells = document.getElementsByClassName('cell')
        for (let cell of cells) {
          let content = cell.innerText
          if (content.indexOf('^') !== -1) {
            cell.innerText = content.split('^').join('\n')
          }
        }
      },
      setCellColor() {
        const cells = document.querySelectorAll('.el-table__row td')
        const COURSE_STATUS_REG = /\*\[(.+)]/
        for (let cell of cells) {
          let content = cell.innerText
          if (content.search(COURSE_STATUS_REG) !== -1) {
            cell.innerText = content.replace(COURSE_STATUS_REG, '')
            cell.classList.add(content.match(COURSE_STATUS_REG)[1])
          }
        }
      }
    },
    mounted() {
      // 一定要使用 nextTick 来等待下一个时间循环
      this.$nextTick(() => {
        this.renderTable()
      })
    },
    watch:{
      courseData(oldVal, newVal) {
        this.$nextTick(() => {
          this.renderTable()
        })
      }
    }
  }
</script>

<style scoped>

</style>

<style>
  .course-table .approve {
    background-color: #67C23A !important;
    transition: all .7s;
    color: white;
  }

  .course-table .approve:hover{
    background-color: #73d940 !important;
  }

  .course-table .wait {
    transition: all .7s;
    color: white;
    background-color: #E6A23C !important;
  }

  .course-table .wait:hover {
    background-color: #fcc947 !important;
  }

  .course-table .reject {
    color: white;
    transition: all .7s;
    background-color: #F56C6C !important;
  }

  .course-table .reject:hover {
    color: white;
    background-color: #ff5845 !important;
  }

  .course-table tr:hover{
    background-color: initial !important;
  }

</style>
